<div style="width: 100%;min-height: 650px;min-width: 950px;position: relative;padding-bottom: 40px">
    <h1 mat-dialog-title style="display:inline-block;padding-top: 14px; margin-bottom: 0px !important;">{{'dlg.layout-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" style="float:right;cursor:pointer;color:gray;position: relative; top: 10px; right: 0px">clear</mat-icon>
    <mat-tab-group style="width: 100%;height: 100%">
        <mat-tab label="{{'dlg.layout-general' | translate}}">
            <div class="my-form-field" style="display: inline-block;margin-top: 25px;">
                <span>{{'dlg.layout-lbl-sview' | translate}}</span>
                <mat-select [(value)]="data.layout.start" style="width: 400px">
                    <mat-option *ngFor="let view of data.views" [value]="view.id">
                        {{ view.name }}
                    </mat-option>
                </mat-select>
            </div>
            <div class="my-form-field" style="display: inline-block;margin-bottom: 25px;margin-left: 180px;">
                <ngx-fab-button #fabmenu icon="menu" iconOpen="menu" color="rgba(68,138,255, 1)" 
                                    style="color: rgba(255,255,255,1);background-color: rgba(68,138,255, 0);">
                </ngx-fab-button>
            </div>
            <div class="my-form-field" style="display: inline-block;margin-bottom: 25px;margin-left: 60px;">
                <span>{{'dlg.layout-show-dev' | translate}}</span>
                <mat-slide-toggle color="primary" [(ngModel)]="data.layout.showdev"></mat-slide-toggle>
            </div>

            <!-- <div style="max-height: 540px; overflow-y: auto; overflow-x: hidden; padding-top: 15px;">
                <div style="display: block;">
                    <div class="my-form-field">
                        <span>Name</span>
                        <input [(ngModel)]="data.settings.name" style="width: 220px" type="text">
                    </div>
                    <div class="toolbox" *ngIf="isToolboxToShow()">
                        <button mat-icon-button (click)="onAddInput()">
                            <mat-icon>add_circle_outline</mat-icon>
                        </button>
                        <button mat-icon-button (click)="slideView = !slideView;onRangeViewToggle()" *ngIf="isRangeToShow()">
                            <mat-icon class="header-icon" *ngIf="slideView">toll</mat-icon>
                            <mat-icon class="header-icon" *ngIf="!slideView">input</mat-icon>
                        </button>
                        <button mat-icon-button (click)="withAlarm = !withAlarm;onAlarmToggle();" *ngIf="isAlarmToShow()">
                            <mat-icon class="header-icon" *ngIf="!withAlarm">notifications</mat-icon>
                            <mat-icon class="header-icon" *ngIf="withAlarm">notifications_off</mat-icon>
                        </button>
                    </div>
                </div>
                <div mat-dialog-content style="overflow: hidden; width:100%">
                    <flex-head [data]="data" [property]="property" #flexhead></flex-head>
                </div>
            </div> -->
        </mat-tab>
        <mat-tab label="{{'dlg.layout-navigation' | translate}}">
            <div style="display: inline-block;margin-top: 10px;width:65%; min-height: 500px; overflow-y: auto; height: 620px">
                <div>
                    <button mat-icon-button>
                        <mat-icon aria-label="Menu">menu</mat-icon>
                    </button>
                    <div style="display: inline-block;padding-left: 140px">
                        <button mat-icon-button (click)="onAddMenuItem(null)">
                            <mat-icon aria-label="Add">control_point</mat-icon>
                        </button>
                    </div>
                </div>
                <div class="sidenav-menu" style="height: calc(100% - 50px);" [ngClass]="'sidenav-menu-' + data.layout.navigation.type">
                    <mat-list dndDropzone [dndHorizontal]="layout.dndHorizontal" dndEffectAllowed="copyMove" (dndDrop)="onDrop($event, draggableListLeft)" class="dndList" style="padding-top: 10px; background-color: rgba(244,245,247, 1)">

                        <mat-list-item dndPlaceholderRef class="dndPlaceholder">
                        </mat-list-item>

                        <mat-list-item *ngFor="let item of draggableListLeft; let i = index" [dndDraggable]="item" [dndEffectAllowed]="'move'" (dndStart)="onDragStart($event)" (dndMoved)="onDragged(item, draggableListLeft, 'move')" (dndCanceled)="onDragged(item, draggableListLeft, 'none')" (dndEnd)="onDragEnd($event)" [ngClass]="'menu-item-' + data.layout.navigation.type">
                            <button type="button" mat-button class="sidenav-btn" [ngSwitch]="data.layout.navigation.type" style="cursor: move;">
                                <!-- <mat-icon *ngIf="mode.value === navMode.icon || mode.value === navMode.block">{{item.icon}}</mat-icon> -->
                                <div *ngSwitchCase="'icon'" class="menu-item-content-icon">
                                    <mat-icon>{{item.icon}}</mat-icon>
                                </div>
                                <div *ngSwitchCase="'text'" class="menu-item-content-text">
                                    <span>{{item.text}}</span>
                                </div>
                                <div *ngSwitchCase="'block'" class="menu-item-content-block">
                                    <mat-icon style="display: block;">{{item.icon}}</mat-icon>
                                    <span>{{item.text}}</span>
                                </div>
                                <div *ngSwitchCase="'inline'" class="menu-item-content-inline">
                                    <mat-icon style="display: inline-block">{{item.icon}}</mat-icon>
                                    <span style="display: inline-block">{{item.text}}</span>
                                </div>
                            </button>
                            <div style="padding-left:15px">
                                <div style="display: block;width: 50px;">
                                    <mat-icon (click)="onAddMenuItem(item)" class="layout-menu-item-icon layout-menu-item-edit">edit</mat-icon>
                                    <mat-icon (click)="onRemoveMenuItem(i, item)" class="layout-menu-item-icon layout-menu-item-delete">clear</mat-icon>
                                </div>
                                <div class="layout-menu-item-link">{{getViewName(item)}}</div>
                            </div>
                        </mat-list-item>
                    </mat-list>
                </div>
            </div>
            <div style="display: inline-block;margin-top: 25px;margin-left: 10px;top: 0px;position: absolute;">
                <div class="my-form-field" style="display: block;">
                    <span>{{'dlg.layout-lbl-smode' | translate}}</span>
                    <mat-select [(value)]="data.layout.navigation.mode" style="width: 300px">
                        <mat-option *ngFor="let mode of navMode | enumToArray" [value]="mode.key">
                            {{ mode.value }}
                        </mat-option>
                    </mat-select>
                </div>
                <div class="my-form-field" style="display: block; margin-top: 10px">
                    <span>{{'dlg.layout-lbl-type' | translate}}</span>
                    <mat-select [(value)]="data.layout.navigation.type" style="width: 300px">
                        <mat-option *ngFor="let type of navType | enumToArray" [value]="type.key">
                            {{ type.value }}
                        </mat-option>
                    </mat-select>
                </div>
            </div>

            <!-- <div style="max-height: 540px; overflow-y: auto; overflow-x: hidden; padding-top: 15px;">
                <div style="display: block;">
                    <div class="toolbox">
                        <button mat-icon-button (click)="onAddEvent()">
                            <mat-icon>add_circle_outline</mat-icon>
                        </button>
                    </div>
                </div>
                <div mat-dialog-content style="overflow: hidden; width:100%">
                    <flex-event [property]="property" [views]="views" #flexevent *ngIf="eventsSupported" style="padding-bottom: 5px"></flex-event>
                </div>
            </div> -->
        </mat-tab>
        <mat-tab label="{{'dlg.layout-header' | translate}}">
            <div style="overflow-y: hidden; overflow-x: hidden; margin-top: 10px; min-height: 500px;">
                <div class="header-layout">
                    <div class="header-menu">
                        <button mat-icon-button>
                            <mat-icon aria-label="Menu">menu</mat-icon>
                        </button>
                    </div>
                    <div class="header-title">
                        {{data.layout.header.title}}
                    </div>
                    <div style="float: right; line-height: 46px;">
                        <button mat-icon-button class="header-login">
                            <mat-icon aria-label="Login">account_circle</mat-icon>
                        </button>
                    </div>
                    <div class="header-button">
                        <button mat-icon-button class="alarm-layout">
                            <mat-icon aria-label="Alarms">notifications_none</mat-icon>
                        </button>
                        <button mat-icon-button class="info-layout">
                            <mat-icon aria-label="Info">error_outline</mat-icon>
                        </button>
                    </div>
                </div>
                <div class="header-config">
                    <div class="config">
                        <div class="my-form-field" style="padding-left: 20px;">
                            <span>{{'dlg.layout-lbl-title' | translate}}</span>
                            <input [(ngModel)]="data.layout.header.title" type="text" style="width: 260px">
                        </div>
                    </div>
                    <div class="config">
                        <div class="my-form-field">
                            <span>{{'dlg.layout-lbl-alarms' | translate}}</span>
                            <mat-select [(value)]="data.layout.header.alarms" style="width: 260px">
                                <mat-option *ngFor="let mode of notifyMode | enumToArray" [value]="mode.key">
                                    {{ mode.value }}
                                </mat-option>
                            </mat-select>
                            <mat-icon aria-label="Alarms">notifications_none</mat-icon>
                        </div>
                        <div class="my-form-field" style="margin-top: 20px;">
                            <span>{{'dlg.layout-lbl-infos' | translate}}</span>
                            <mat-select [(value)]="data.layout.header.infos" style="width: 260px">
                                <mat-option *ngFor="let mode of notifyMode | enumToArray" [value]="mode.key">
                                    {{ mode.value }}
                                </mat-option>
                            </mat-select>
                            <mat-icon aria-label="Info">error_outline</mat-icon>
                        </div>
                    </div>
                </div>
            </div>
        </mat-tab>
    </mat-tab-group>
    <div mat-dialog-actions style="display: inline-block; position: absolute; bottom: 10px; right: 10px">
        <button mat-raised-button [mat-dialog-close]="">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" (click)="onOkClick" [mat-dialog-close]="data" cdkFocusInitial>{{'dlg.ok' | translate}}</button>
    </div>
</div>